<template>
  <div v-if="!item.meta || !item.meta.hidden">
    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown': !isNest}">
          <el-icon v-if="onlyOneChild.meta && onlyOneChild.meta.icon">
            <component :is="onlyOneChild.meta.icon" />
          </el-icon>
          <template #title>
            <span>{{ onlyOneChild.meta.title }}</span>
          </template>
        </el-menu-item>
      </app-link>
    </template>

    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
      <template #title>
        <el-icon v-if="item.meta && item.meta.icon">
          <component :is="item.meta.icon" />
        </el-icon>
        <span v-if="item.meta">{{ item.meta.title }}</span>
      </template>
      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :is-nest="true"
        :item="child"
        :base-path="resolvePath(child.path)"
        class="nest-menu"
      />
    </el-sub-menu>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { isExternal } from '@/utils/validate'
import AppLink from './Link.vue'

const props = defineProps({
  item: {
    type: Object,
    required: true
  },
  isNest: {
    type: Boolean,
    default: false
  },
  basePath: {
    type: String,
    default: ''
  }
})

const onlyOneChild = ref({})

const hasOneShowingChild = (children = [], parent) => {
  if (!children || children.length === 0) {
    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
    return true
  }
  
  const showingChildren = children.filter(item => {
    if (item.meta && item.meta.hidden) {
      return false
    } else {
      onlyOneChild.value = item
      return true
    }
  })

  if (showingChildren.length === 1) {
    return true
  }

  if (showingChildren.length === 0) {
    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
    return true
  }

  return false
}

const resolvePath = (routePath) => {
  if (!routePath) {
    return props.basePath
  }
  
  if (isExternal(routePath)) {
    return routePath
  }
  
  if (isExternal(props.basePath)) {
    return props.basePath
  }
  
  if (routePath.startsWith('/')) {
    return routePath
  }
  
  return props.basePath.endsWith('/') 
    ? `${props.basePath}${routePath}`
    : `${props.basePath}/${routePath}`
}
</script>

<style lang="scss" scoped>
.el-menu-item, .el-sub-menu {
  height: 46px;
  line-height: 46px;
  margin: 4px 8px;
  border-radius: 6px;
  width: calc(100% - 16px);
  text-decoration: none !important;
  border-bottom: none !important;
  
  .el-icon {
    margin-right: 10px;
    width: 18px;
    font-size: 18px;
    transition: all 0.3s;
  }
  
  &.is-active {
    background-color: #ecf5ff !important;
    color: #409eff !important;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
    border-bottom: none !important;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 3px;
      background-color: #409eff;
      border-radius: 0 3px 3px 0;
    }
    
    .el-icon {
      transform: scale(1.1);
      color: #409eff;
    }
  }
  
  &:hover {
    background-color: #f5f7fa !important;
    
    .el-icon {
      transform: translateX(2px);
    }
  }

  // 当子菜单展开时调整父菜单高度
  &.is-opened {
    height: auto !important; // 自动调整高度以适应子菜单
    
    > .el-sub-menu__title {
      height: 46px;
      line-height: 46px;
    }
  }
}

.submenu-title-noDropdown {
  padding: 0 16px !important;
  position: relative;
  border-bottom: none !important;
  text-decoration: none !important;
}

.nest-menu .el-menu-item {
  min-width: 0 !important;
  padding: 0 16px 0 40px !important;
  height: 42px;
  line-height: 42px;
  margin: 2px 8px;
  border-bottom: none !important;
  
  &::before {
    left: 0;
  }
}

.el-sub-menu__title {
  padding: 0 16px !important;
  margin: 4px 8px;
  border-radius: 6px;
  border-bottom: none !important;
  text-decoration: none !important;
  
  &:hover {
    background-color: #f5f7fa !important;
  }
}

// 处理嵌套菜单的显示
.el-sub-menu.is-opened {
  > .el-menu {
    position: static !important; // 使用静态定位而非绝对定位
    display: block !important; // 确保子菜单显示
    margin-top: 0 !important; // 去除顶部边距
    margin-bottom: 8px !important; // 底部增加边距推开下面的元素
  }
}

// 处理嵌套的子菜单
.nest-menu {
  .el-menu {
    padding: 0;
    background-color: transparent !important;
  }
}

.el-menu--popup {
  min-width: 160px;
  padding: 5px 0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  overflow: visible !important;
  
  .el-menu-item {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    margin: 4px 5px;
    border-radius: 4px;
    border-bottom: none !important;
    text-decoration: none !important;
    
    &.is-active {
      background-color: #ecf5ff;
      color: #409eff;
      border-bottom: none !important;
    }
    
    &:hover {
      background-color: #f5f7fa;
    }
  }
  
  // 增强二级子菜单显示
  .el-sub-menu {
    margin: 0;
    width: 100%;
    height: auto !important; // 自动调整高度适应内容
    display: block;
    
    .el-sub-menu__title {
      margin: 4px 5px;
      padding: 0 20px !important;
      height: 40px;
      line-height: 40px;
      border-radius: 4px;
      border-bottom: none !important;
    }
    
    .el-menu {
      background-color: transparent !important;
      padding-left: 5px;
      position: static !important; // 静态定位
      margin-top: 0;
      margin-bottom: 4px;
    }
    
    // 确保嵌套菜单显示在正确的位置
    .el-menu--popup {
      position: static !important; // 改为静态定位
      left: 0 !important;
      top: 0 !important;
      transform: none !important;
      box-shadow: none;
      border-radius: 0;
      padding: 0 0 0 16px;
      margin-top: 0;
      
      &::before {
        display: none;
      }
    }
    
    .el-menu-item {
      padding-left: 40px !important;
    }
  }
}

// 动画效果
.el-menu-item, .el-sub-menu__title {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

// 移除所有菜单链接的下划线
a {
  text-decoration: none !important;
}

// 移除菜单项的底部边框
.el-menu, .el-menu--collapse, .el-menu--popup {
  .el-menu-item, .el-sub-menu, .el-sub-menu__title {
    border-bottom: none !important;
  }
}
</style>
